<template>
  <div class="container">
    <div class="mainor_form">
      <el-form
        :inline="true"
        :model="grant_form"
        class="demo-form-inline"
        ref="diaRefForm"
        label-width="70px"
        style="width: 100%"
      >
        <el-form-item label="" prop="uid">
          <change-user-input
            class="wid220"
            ref="changeUserInput"
            @sendValue="
              (data) => {
                grant_form.uid = data.info.user_id;
              }
            "
            @clear="grant_form.uid = ''"
          ></change-user-input>
        </el-form-item>
        <el-form-item label="" prop="group_id">
          <el-select
            v-model.trim="grant_form.group_id"
            placeholder="用户分组"
            class="wid160"
          >
            <el-option label="所有" :value="parseInt(0)"></el-option>
            <el-option
              v-for="(item, index) in group"
              :key="index"
              :label="item"
              :value="parseInt(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="region_id">
          <el-select
            v-model.trim="grant_form.region_id"
            placeholder="用户区域"
            class="wid160"
          >
            <el-option label="所有" :value="parseInt(0)"></el-option>
            <el-option
              v-for="(item, index) in region"
              :key="index"
              :label="item"
              :value="parseInt(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="reset marginLeft10" @click="reset(2)"
            >重置</el-button
          >
          <el-button
            type="primary"
            @click="getArticleList(2)"
            :loading="dia_listLoading"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="main_table">
      <el-table
        ref="multipleTable"
        v-loading="dia_listLoading"
        :data="user_list"
        element-loading-text="加载中"
        fit
        border
        highlight-current-row
        :header-cell-class-name="this.$verticaline"
        height="400"
      >
        <el-table-column width="50">
          <template #header>
            <el-checkbox
              @change="(val) => changeAll(val)"
              v-model="checkAll"
            ></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox
              @change="(val) => oneChange(val, scope.row)"
              v-model="scope.row.checked"
            ></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          label="用户名称"
          prop="nickname"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          label="手机"
          align="center"
          prop="mobile"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          label="所属分组"
          align="center"
          prop="count"
          show-overflow-tooltip
          min-width="120"
        >
          <template slot-scope="scope">
            {{ group[scope.row.group_id] }}
          </template>
        </el-table-column>
        <el-table-column
          label="所属区域"
          align="center"
          prop="count"
          show-overflow-tooltip
          min-width="120"
        >
          <template slot-scope="scope">
            {{ region[scope.row.region_id] }}
          </template>
        </el-table-column>
        <el-table-column
          label="管理操作"
          align="center"
          show-overflow-tooltip
          min-width="180"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="handleSelect(scope)">选择</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_page boxdq">
      <!-- 分页 -->
      <div></div>
      <div class="main_page_r">
        <el-pagination
          :current-page="grant_current.page"
          :page-sizes="[20, 50, 100]"
          :page-size="grant_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="grant_totalCount"
          background
          @size-change="(pageSize) => changeLimit(pageSize)"
          @current-change="(page) => changePage(page)"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getTemplateMember } from "@/api/global/globalPrint";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
  name: "",
  props: {
    tem_id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      grant_form: {
        uid: "",
        group_id: "",
        region_id: "",
        tem_id: "",
      },
      user_list: [],
      // 发放优惠券分页
      grant_current: {
        page: 1,
        per_page: 20,
      },
      // 全选
      selectArr: [],
      // 选中传递的值
      selectUserArr: [],
      grant_limit: 20,
      grant_totalCount: 1,
      dia_listLoading: false,
      checkAll: false,
      group: {},
      region: {},
    };
  },
  watch: {
    tem_id: {
      handler(val) {
        this.grant_form.tem_id = val;
      },
      immediate: true,
      deep: true,
    },
    user_list: {
      handler(val) {
        let all_list = val;
        let alllength = 0;

        let arr = [];
        let selectUserArr = [];
        all_list.map((e) => {
          if (e.checked) {
            alllength++;
            arr.push(e);
            selectUserArr.push({
              id: e.id,
              nickname: e.nickname,
            });
          }
        });
        this.selectArr = arr;
        this.selectUserArr = selectUserArr;
        if (alllength == all_list.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      },
      deep: true,
    },
  },
  methods: {
    getArticleList() {
      this.grant_current.page = 1;
      this.getTemplateMember();
    },
    reset() {
      this.$refs["diaRefForm"].resetFields();
      if (this.$refs["changeUserInput"]) {
        this.$refs["changeUserInput"].name = "";
      }
      this.getTemplateMember();
    },
    // 分页
    changeLimit(pageSize) {
      this.grant_current.per_page = pageSize;
      this.getTemplateMember();
    },
    changePage(page) {
      this.grant_current.page = page;
      this.getTemplateMember();
    },
    // 获取用户
    getTemplateMember() {
      this.dia_listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.grant_form,
        this.grant_current
      );
      getTemplateMember(data).then((res) => {
        this.dia_listLoading = false;
        if (res.errcode == 0) {
          this.group = res.group;
          this.region = res.region;
          res.member.data.map((e) => {
            e.group_id = "";
            e.region_id = "";
            e.checked = false;
            if (e.info && e.info.group_id) {
              e.group_id = e.info.group_id;
            }
            if (e.info && e.info.region_id) {
              e.region_id = e.info.region_id;
            }
          });
          this.user_list = res.member.data;
          this.grant_totalCount = res.member.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 选择用户
    handleSelect(scope) {
      let row = scope.row;
      let index = scope.$index;
      this.user_list.splice(index, 1);
      let data = [
        {
          id: row.id,
          nickname: row.nickname,
        },
      ];
      this.send_user(data);
    },
    // 选择全部
    changeAll(val) {
      this.checkAll = val;
      // 全选反选
      this.user_list.map((e) => {
        e.checked = val;
      });
    },
    // 一级选择
    oneChange(val, row) {
      row.checked = val;
    },
    // 传递数据
    send_user(data) {
      this.$emit("get_user", data);
    },
  },
  created() {
    this.getTemplateMember();
  },
  destroyed() {
    console.log("我销毁了");
  },
};
</script>
<style lang='scss' scoped>
/deep/.el-table__empty-text {
  line-height: 240px;
}
</style>
